<template>
	<view class="content">

		<view class="swiper">
			<view class="swiper-tab">
				<view v-for="(item,index) in tabList" :key="index"
					:class="[currentTab==index ? 'active ': '','swiper-tab-list']" @click="switchNav(index)">
					{{item.name}}
				</view>
				<view class="city-serach"><input confirm-type="search"  v-model="serch" @confirm="doSearch($event)"
						placeholder="请输入收货人、手机号、地址 搜索" class="city-serach-input" />
						<image class="suos"  src="../../static/pages/sousuo@2x.png" mode=""></image>
						</view>
			</view>
			<view class="tab-content" >
				<view class="swipers">
					
					<view v-if="currentTab==1" class="swiper-tabs "     >
						<view :class="[ bianshe,'fl']" @click="quanbu" style="width: 20%;font-size: 28rpx;  
    padding-top: 2rpx;
    font-weight: 400;
    color: #7B7B7B;">
							全部
							<view class="weilei">
							</view>
						</view>
						<scroll-view scroll-x="true" style="width: 80%;" class="fr" >
							<view v-for="(item,index) in tabLists" :key="index" 
								:class="[currentTabss==index ? 'actives': '', 'swiper-tab-lists']" @click="switchNavss(index)">
								{{item.name}}
								<view class="weilei">
								</view>
							</view>
						</scroll-view>
						
					</view>
					
					<view v-else-if="currentTab==0" class="swiper-tabs"   >
						<view v-for="(item,index) in tabLists" :key="index"
							:class="[currentTabs==index ? 'actives': '', 'swiper-tab-listss']" @click="switchNavs(index)">
							{{item.name}}
							<view class="weilei">
							</view>
						</view>
					</view>
					
					<view class="tab-contents" >
						<scroll-view scroll-y="true" :style="{height: scollHeight+'px'}"  @scrolltolower="lower"   >
							<view class="order_list" @click="order(item)" v-for="(item, index) in list" :key="index">
								<view class="qcfd">
									<view class="fl qcfd">
										<!-- <view class="fl cirle" style="background-color:#2577FF ;">
										</view> -->
										<text
											class="fl adress_infos">收货人: {{item.deliveryUser?item.deliveryUser:'--'}} {{item.deliveryTel?item.deliveryTel:'--'}}</text>
											
									</view>
									<view v-if="item.isPickup==0&&status1.indexOf(item.status)>-1" class="fr" style="color: #FF690D;">
										自送
									</view>
									<view v-if="item.isPickup==1&&status1.indexOf(item.status)>-1" class="fr" style="color: #FF690D;">
										待揽收
									</view>
									<view  v-else-if="item.status==5" class="fr" style="color: #FF690D;">
										配送中
									</view>
									<view  v-else-if="item.status==6" class="fr" style="color: #FF690D;">
										已完成
									</view>
									<view  v-else-if="item.status==7" class="fr" style="color: #FF690D;">
										已拒收
									</view>
									<view  v-else-if="item.status==-1" class="fr" style="color: #7B7B7B;">
										已取消
									</view>
								</view>
								<view class="qcfd"  style="margin-bottom: 6rpx;">
								<!-- 	<view class="fl cirle" style="background-color: #FF690D;">
									</view> -->
									<text v-if="item.deliveryProvince"
										class="fl adress_info">{{item.deliveryProvince}}{{item.deliveryCity}}{{item.deliveryArea}}{{item.deliveryAddress}}</text>
										<text v-else class="fl adress_info">
											{{item.deliveryAddress}}
										</text>
								</view>
								<view class="line">

								</view>
								<view class="qcfd" style="padding: 12rpx 0  0;">
									<view class="m_left fl">
										<view  v-if="" class="dan_info">
											取货地址:{{item.pickAddress}}
										</view>
										
										<view class="dan_info">
											下单时间:{{item.ordertime}}
										</view>
									</view>
									<view class="m_right fr">
										<view class="dan_info">
											件数:{{item.qty}}
										</view>
										<view  v-if="false" class="" style="font-size: 26rpx;color: #2C2C2D;">
											预计2-29日送达
										</view>
									</view>
								</view>
								<view v-if="item.goodsName" class="hwmc">
									货物名称:{{item.goodsName}}
								</view>
								<view v-if="status1.indexOf(item.status)>-1&&item.orderType==2" class="line"  style="margin-top: 10rpx;"></view>
									<view v-if="status1.indexOf(item.status)>-1&&item.orderType==1" class="line"  style="margin-top: 10rpx;">
								</view>
								<view class="qcfd" >
									<button @tap.native.stop="cancleOrder(item)" v-if="status1.indexOf(item.status)>-1" class="fr cancle_order" type="default">取消订单</button>
								</view>
							</view>
							<uni-load-more   :contentText="loadContent" :status="loadStatus"></uni-load-more>
						</scroll-view>
					</view>




				</view>
			</view>
			<!-- <view class="tab-content " v-if="currentTab===1"  style="
    text-align: center;
    padding: 16rpx 26rpx;
    background-color: #F4F3F3;">
				<view class="tabt">
					<image src="https://shengxp.oss-cn-chengdu.aliyuncs.com/camelx/30bb4656564e4532818909d1dfa62448.png" mode=""></image>
				</view>
				
				<view class="ttxt">
					敬请期待
				</view>
			</view> -->
		</view>

	</view>

</template>

<script>
	import requestUrl from '@/index.js'
	import jsfunPicker from '@/components/jsfun-picker/jsfun-picker.vue'
	import uniNumberBox from '@/components/uni-number-box/uni-number-box.vue'
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
		components: {
			uniNumberBox,
			jsfunPicker,
			uniLoadMore
		},
		data() {
			return {
				loadContent: {
					contentdown: "",
					contentrefresh: "",
					contentnomore: ""
				},
				bianshe:'actives',
				loadStatus: 'more',
				status: '',
				pageNo: 1,
				pageSize: 10,
				orderLists: '',
				avatar: '',
				tabid: null,
				tabList: [
					{
						name: '装卸搬运',
					},
					{
						name: '同城订单',
					},
					
				],
				tabLists:[{
						name: '全部',
					},
					
					{
						name: '待揽收',
					},
					
					{
						name: '配送中',
					},
					{
						name: '已完成',
					},
					{
						name: '已取消',
					}
					
				],
				
				currentTab: 0,
				currentTabs: 0,
				currentTabss: 9,
				list: [],
				total: 0,
				status1:[0,1,2,3,4],
				status2:[6,7],
				serch:'',
				scollHeight:0,
				ps_type:1,
				serachOrder:''
			}
		},
		async onShow() {
			if(uni.getStorageSync('cn')){
				console.log('cn',uni.getStorageSync('cn'))
				if(uni.getStorageSync('cn')==2){
				this.list = []
				this.ps_type=1
				this.currentTab=0
				uni.removeStorage({
						key:'cn'
					})
				}else{
					this.ps_type=2
					this.list = []
					this.currentTab=1
					this.tabLists=[
					
					{
						name: '待揽收',
					},
					{
						name: '转运中',
					},
					{
						name: '配送中',
					},
					{
						name: '已完成',
					},
					{
						name: '已取消',
					},
					{
						name: '已拒收',
					}]
					
				}
				uni.removeStorage({
						key:'cn'
					})
				
			}
			
			this.serch=''
			this.list = []
			this.pageNo=1
			if(uni.getStorageSync('token')){
				this.orderList()
			}
			let _that=this
			uni.getSystemInfo({
				 success: function (res) {
				   _that.scollHeight =(res.windowHeight-150)
				   
				    }
			})
		},
		onLoad() {
					
		},
		watch:{
			serch: function(newVal, oldVal) {
				if (!newVal) {
					this.pageNo=1
					this.list=[]
					this.orderList()
				}
			},
		},
		onHide() {
			this.list = []
		},
		computed: {

			
		},
		methods: {
			
		async	quanbu(){
			this.bianshe='actives'
			this.status=''
			this.currentTabss=8
				this.loadStatus = 'loading';
				let res = await this.$request.get(this.$requestUrl.ORDER_LIST_URL, {
					data: {
						orderType:this.ps_type,
						status: this.status,
						pageSize: 10,
						pageNo: this.pageNo
					}
				});
				
				if(res.code==3000){
				return 	this.$api.message('用户未登录')
				}
				const orders = res.data || [];
				// json格式合并变成数组格式
				if (orders.length < this.pageSize) {
					this.loadStatus = 'noMore';
				} else {
					this.loadStatus = 'more';
				}
				this.list = this.list.concat(orders);
				
				uni.stopPullDownRefresh();
			
		},
			
		async	doSearch(evt) {
			
			console.log('jkl',evt.detail.value,this.serch)
				
				this.pageNo=1
				this.list=[]
				await this.orderList()
				// let res = await this.$request.get(this.$requestUrl.ORDER_LIST_URL, {
				// 	data: {
				// 		status: this.status,
				// 		keyword:serachOrder,
				// 		orderType:this.ps_type,
				// 		pageSize: this.pageSize,
				// 		pageNo: 1
				// 	}
				// });
				
			},
			async cancleOrder(item) {
				let _that=this
				uni.showModal({
							    title: '提示',
							    content: '是否确定取消',
							    success: async function (res) {
							        if (res.confirm) {
							let res = await _that.$request.post(_that.$requestUrl.CANCLE_ORDER_URL, {
									data: {
										 orderId:item.id
									}
							});
							if(res){
								
								_that.list = [];
								_that.orderList()
								uni.showToast({
									title: '已取消',
									icon: "success",
									duration: 2000
								});
								
							}else{
								_that.$api.msg('系统繁忙，请稍后重试')
							}
							 
							           
						} else if (res.cancel) {
							            
							        }
							    }
							});
				
			
			},

			order(item) {
				uni.navigateTo({
					url: '../orderDetail/orderDetail?data=' + JSON.stringify(item)
				})
			},
			changePag(data) {
				this.pageNo = data.current
				this.orderList()
			},
			async orderList() {
				this.loadStatus = 'loading';
				let res = await this.$request.get(this.$requestUrl.ORDER_LIST_URL, {
					data: {
						orderType:this.ps_type,
						status: this.status,
						keyword:this.serch,
						pageSize: this.pageSize,
						pageNo: this.pageNo
					}
				});
				
				if(res.code==3000){
				return 	this.$api.message('用户未登录')
				}
				const orders = res.data || [];
				// json格式合并变成数组格式
				if (orders.length < this.pageSize) {
					this.loadStatus = 'noMore';
				} else {
					this.loadStatus = 'more';
				}
				this.list = this.list.concat(orders);
				
				uni.stopPullDownRefresh();
			},
			//下拉刷新
			// upper() {
			// 	this.pageNo = 1;
			// 	this.list = [];
			// 	this.loadStatus = 'more';
			// 	this.orderList();
			// },
			/**
			 * 上拉加载更多
			 */
			lower() {
				if (this.loadStatus == 'more') {
					this.pageNo++;
					this.orderList();
				}
			},
			switchNav(i) {
				
				this.pageNo = 1;
				if(i==1){
					this.ps_type=2
					this.list = []
					this.tabLists=[
						{
							name: '待揽收',
						},
						{
							name: '转运中',
						},
						{
							name: '配送中',
						},
						{
							name: '已完成',
						},
						{
							name: '已取消',
						},
						{
							name: '已拒收',
						},
					]
				}else{
					this.ps_type=1
					this.list = []
					this.tabLists=[{
							name: '全部',
						},
						
						{
							name: '待揽收',
						},
						
						{
							name: '配送中',
						},
						{
							name: '已完成',
						},
						{
							name: '已取消',
						}
						
					]
					
				}
				this.orderList();
				if (this.currentTab == i) {
					return false;
				} else {
					this.currentTab = i;
				}
			},
			switchNavs(i) {
				this.list = []
				this.pageNo = 1;
				if (i==1) {
					this.status = 0
				} else if(i==2){
					this.status = 1
				}else if(i==3){
					this.status = 2
				}else if(i==4){
					this.status=-1
				}else{
					this.status=''
				}
				
				this.orderList()
				if (this.currentTabs == i) {
					return false;
				} else {
					this.currentTabs = i;
					
				}
			},
			
			switchNavss(j) {
				this.list = []
				this.pageNo = 1;
			this.bianshe=''
				
					if (j==0) {
						this.status = 0
					} else if(j==1){
						this.status = 1
					}else if(j==2){
						this.status = 2
					}else if(j==3){
						this.status=3
					}else if(j==4){
						this.status = -1
					}else if(j==5){
						this.status=4
					}else{
						this.status=''
					}
					
				
				this.orderList()
				if (this.currentTabss == j) {
					return false;
				} else {
					this.currentTabss = j;
					
				}
			}
		}
	}
</script>

<style>
	.content {
		position: relative;
		/* display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center; */
		background-color: #F4F3F3;
	}

	.swiper {
		padding-top: 100rpx;
		background-color: #FFFFFF;
			position: fixed;
	}


	.swiper-tab {
		text-align: center;
		line-height: 1.6;
		display: flex;
		flex-wrap: wrap;
		background: #fff;
		padding: 0 24rpx;
		padding-bottom: 20rpx;
	
	}


	.swiper-tab-list {
		font-size: 32rpx;
		color: #7B7B7B;
		height: 70rpx;
		position: relative;
		width: 128rpx;
		margin-right: 40rpx;
		font-weight: 500;
		line-height: 70rpx;
	}

	.active {
		color: #2C2C2D;
		font-size: 40rpx;
		font-weight: bold;
		width: 160rpx;
	}


	/* .weilei {
		width: 48rpx;
		height: 6rpx;
		background-color: #FF690D;
		border-radius: 25%;
		margin: 0 auto;
		display: none;
	}

	.active .weilei {
		display: block;
	} */


	.dot {
		position: absolute;
		display: flex;
		width: 37rpx;
		height: 35rpx;
		line-height: 40rpx;
		text-align: center;
		align-items: center;
		/* 垂直居中 */
		justify-content: center;
		/* 水平居中 */
		background: #02a9ff;
		border-radius: 200rpx;
		color: #fff;
		z-index: 999;
		font-size: 52rpx;
		top: 0;
		right: 10rpx;
	}

	.tab-content {
		text-align: center;

	}

	button::after {
		border: none
	}

	.swipers {}

	.tab-contents {
		text-align: left;
		padding:0 24rpx;
		background-color: #F4F3F3;
		
	}

	.swiper-tabs {
		padding:0 calc((100% - 700rpx) / 2);
		/* justify-content: space-between; */
		padding-bottom: 10rpx;
		border-bottom: 2rpx solid #E1E1E1;
		overflow: hidden;
		 white-space: nowrap;
		 width: 700rpx;
		 position: relative;
		 height: 55rpx;
	}

	.swiper-tab-lists {
		display: inline-block;
		font-size: 28rpx;
		width: 25%;
		font-weight: 400;
		color: #7B7B7B;
		
	}
	
	.swiper-tab-listss {
		display: inline-block;
		font-size: 28rpx;
		width: 20%;
		font-weight: 400;
		color: #7B7B7B
		
	}
	
	.swiper-tab-listone{
		position: fixed;
		left: 24rpx;
		padding-top: 1rpx;
		background-color: #FFFFFF;
		
	}

	.weilei {
		width: 32rpx;
		height: 6rpx;
		background-color: #FF690D;
		border-radius: 25%;
		margin: 4rpx auto;
		display: none;
	}

	.actives {
		font-size: 28rpx;
		font-weight: 500 !important;
		color: #FF690D !important;
	}

	.actives .weilei {
		display: block;
	}

	.order_list {
		padding: 16rpx 24rpx;
		border-radius: 16rpx;
		background-color: #FFFFFF;
		margin: 16rpx 0;
		
	}
	
	.order_list:first-child{
		margin-top: 24rpx;
	}
	
	/* .order_list:last-child{
		margin-bottom: 100px !important;
	} */

	.cirle {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
		margin-top: 12rpx;
		margin-right: 16rpx;
	}

	.adress_info {
		font-size: 25rpx;
		
		color: #181818;
		margin-bottom: 16rpx;
	}

.adress_infos {
		font-size: 32rpx;
		font-weight: bold;
		color: #181818;
		margin-bottom: 16rpx;
	}

	.hwmc {
		width: 600rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #7B7B7B;
		letter-spacing: 1rpx;
		margin-top: 4rpx;
		overflow: hidden;
		white-space: nowrap;
			text-overflow: ellipsis;
	}

	.line {
		width: 654rpx;
		height: 1rpx;
		
		box-sizing: border-box;
		background-color: #E9E9E9;
	}

	.dan_info {
		font-size: 24rpx;
		font-weight: 400;
		color: #7B7B7B;
		letter-spacing: 1rpx;
	}

	.cancle_order {
		margin-top: 14rpx;
		width: 144rpx;
		height: 58rpx;
		border-radius: 32rpx;
		border: 2rpx solid #ACACAC;
		font-size: 24rpx;
		font-weight: 400;
		color: #7B7B7B !important;
		padding: 0 !important;
		line-height: 58rpx;
	}

	

	.city-serach {
		position: relative;
		width: 100%;
		height: 72rpx;
		font-size: 28rpx;
		margin: 10rpx 0;
		font-weight: 400;
		color: #7B7B7B;
		line-height: 72rpx;
	}


	.city-serach-input {
		height: 72rpx;
		border-radius: 36rpx;
		/* background: url(../../static/pages/sousuo@2x.png) no-repeat; */
		background-color: #F4F3F3;
		background-position: 32rpx;
		padding-left: 80rpx;
		outline: none;
		font-size: 28rpx;
		text-align: left;
	}
	
	.suos{
		position: absolute;
		width: 24px;
		height: 24px;
		top: 50%;
		transform: translateY(-50%);
		left: 24rpx;
	}
	
	.tabt{
		margin-top: 30rpx;
		text-align: center;
	}
	
	.tabt image{
		width: 360rpx;
		height: 360rpx;
	}
	
	.ttxt{
		margin-top: 112rpx;
		font-size: 36rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FF690D;
	}
</style>


<!-- <template>
 	<view class="content">
 		<citySelect
 		@cityClick="cityClick"
 		:formatName="formatName"
 		:hotCity="hotCity"
 		:obtainCitys="obtainCitys"
 		:isSearch="true"
 		ref="citys"
 		@dele="deleat"
 		@xgdata="xginfo"
 		></citySelect>
 		<view class="new_adress">
 			<navigator url="../newAddress/newAddress">
 				<button type="default">新增收货地址</button>
 			</navigator>
 		</view>
 
 	</view>
 </template>
 
 <script>
 	import citySelect from "@/components/order/city-select.vue";
 	  import requstUrl from '@/index.js';
 	export default {
 		data() {
 			return {
 				priceList:[],
 					//需要构建索引参数的名称（注意：传递的对象里面必须要有这个名称的参数）
 					formatName: 'title',
 					//当前城市
 					activeCity: {
 						id: 0,
 						title: ''
 					},
 					qty:'',
 					shipId:'',
 					deliveryId:'',
 					payer:'',
 					orderType:'',
 					numOrders:0,
 					//热门城市
 					// hotCity: [
 					// 	{
 					// 		id: 0,
 					// 		title: '南京市'
 					// 	},
 					// 	{
 					// 		id: 1,
 					// 		title: '南京市'
 					// 	}
 					// ],
 					//显示的城市数据
 					obtainCitys: [
 						// {
 						// 	id: 0,
 						// 	title: '南京'
 						// },
 						// {
 						// 	id: 1,
 						// 	title: '北京'
 						// },
 						// {
 						// 	id: 2,
 						// 	title: '天津'
 						// },
 						// {
 						// 	id: 3,
 						// 	title: '东京'
 						// }
 					]
 				
 			}
 		},
 		components: {
 			citySelect,
 		},
 		async onShow() {
 			this.shipId=uni.getStorageSync('fhrid')
 		this.orderList()
 			
 		},
 		onLoad() {
 			
 			//动态更新数据
 			setTimeout(() => {
 			
 				//修改数据格式
 				this.formatName = ''
 				//修改当前城市
 				//修改热门城市
 				// this.hotCity = [
 				// 	{
 				// 		cityName: '南京',
 				// 		cityCode: 110100
 				// 	},
 				// 	{
 				// 		cityName: '北京',
 				// 		cityCode: 110102
 				// 	}
 				// ]
 				//修改构建索引数据
 				this.obtainCitys =this.citys
 				// uni.showToast({
 				// 	icon: 'none',
 				// 	title: '更新数据成功',
 				// 	// #ifdef MP-WEIXIN
 				// 	duration: 1000,
 				// 	// #endif
 				// 	mask: true
 				// })
 			}, 1000)
 		},
 		
 		methods: {
 			async orderList() {
				this.loadStatus = 'loading';
				let res = await this.$request.get(this.$requestUrl.ORDER_LIST_URL, {
					data: {
						status: this.status,
						pageSize: this.pageSize,
						pageNo: this.pageNo
					}
				});
				const orders = res.data || [];
				// json格式合并变成数组格式
				if (orders.length < this.pageSize) {
					this.loadStatus = 'noMore';
				} else {
					this.loadStatus = 'more';
				}
				this.citys= this.list.concat(orders);
				uni.stopPullDownRefresh();
			},
 			xginfo(item) {
 				const items = JSON.stringify(item)
 				
 				uni.navigateTo({
 					url: '../newAddress/newAddress?data=' + items.oldData
 				})
 			},
 
 			async deleat(item) {
 				let res = await this.$request.delete(this.$requestUrl.DELETE_ADRESS_URL, {
 					data: {
 						id: item.oldData.id
 					}
 				});
 				this.$api.msg(res || '系统繁忙，请稍后重试')
 				this.hdshr()
 			},
 			cityClick(item){
 				uni.setStorageSync('recever',item)
 				uni.switchTab({
 					url:'../index/index?data='
 				})
 			}
 		}
 
 
 	}
 </script>
 
 <style>
 	.content {
 		position: relative;
 		height: 100vh;
 	}
 
 	.city-serach {
 		background-color: #FFFFFF;
 		padding: 8px 24rpx;
 	}
 
 	.city-serach input {
 		height: 72rpx;
 		border-radius: 36rpx;
 		background: url(/static/scpf/sousuo.png) no-repeat;
 		background-color: #F4F3F3;
 		background-position: 32rpx;
 		padding-left: 80rpx;
 		outline: none;
 		font-size: 13px;
 	}
 
 	.middle {
 		padding: 12px;
 	}
 
 	.line {
 		margin-top: 7px;
 		width: 654rpx;
 		height: 2rpx;
 		border: 1rpx solid #E9E9E9;
 		box-sizing: border-box;
 		background-color: #E9E9E9;
 		opacity: 0.5;
 	}
 
 	.uni-form-item {
 		margin-top: 12px;
 	}
 
 	.pay_type {
 		display: flex;
 	}
 
 	.pay_type label {
 		margin-right: 12px;
 		font-size: 24rpx;
 	}
 
 	.pay_type label radio {
 		transform: scale(0.8)
 	}
 
 	.goods_num {
 		display: flex;
 		margin-top: 3px;
 		text-align: center;
 	}
 
 	.goods_num .jians {
 		line-height: 48rpx;
 		font-size: 13px;
 		color: #7B7B7B;
 		margin-right: 26rpx;
 	}
 
 	.biaoti {
 		font-size: 16px;
 		font-weight: 400;
 		color: #2C2C2D;
 	}
 
 	.all_order {
 		margin: 12px 0;
 		font-size: 14px;
 		font-weight: 400;
 		color: #2C2C2D !important;
 	}
 
 	.bgz {
 		background-color: #FFFFFF;
 		border-radius: 8px;
 		padding: 0 12px;
 		margin-bottom: 12px;
 	}
 
 	.new_adress {
 		position: fixed;
 		bottom: 0;
 		left: 0;
 		background-color: #FFFFFF;
 		width: 100%;
 		padding: 5px 12px;
 
 	}
 
 	.new_adress button {
 		width: 351px;
 		height: 40px;
 		background: #FF690D;
 		border-radius: 20px;
 		color: #FFFFFF;
 
 	}
 
 	.middle {
 		margin-bottom: 50px;
 	}
 </style>
 -->
